<template>
  <div>
    <h1>v-model指令</h1>
    <!-- <p v-if="isShow">{{msg}}</p> -->
    <!-- <input type="text" :value="msg"> -->
    <!-- 
      v-model: 作用：给表单元素创建双向数据绑定的

      双向数据绑定
        数据发生了改变 M =====>   视图会自动跟着变  V
        视图发生了改变 V =====>   数据会自动跟着变  M
      v-model


      插值表达式  v-bind v-on v-if v-else v-show v-else-if:  都是单向数据绑定
      数据变了，视图会自动变
     -->
      <!-- input框和msg实现了双向的数据绑定 -->
     <!-- <input type="text" placeholder="请输入内容" v-model="msg" > -->

     <input type="text" v-model="username" placeholder="请输入你的用户名"><br>
     <input type="text" v-model="password" placeholder="请输入你的密码"><br>
     <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: '' 
    }
  },
  methods: {
    login () {
      console.log(this.username, this.password)
    }
  }
}
</script>

<style>

</style>